<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script type="text/javascript" src="JS/jquery-3.3.1.js"></script>
    <style type="text/css">
    div{
        width: 400px;
    }
    #Title{
        background-color: #0999ac;
        color: #ffffff;
        height: 40px;
        line-height: 40px;
        text-align: center;
        margin: 10px;
    }
    #contect{
        margin: 10px;
    }
    .contect{
        display: none;
    }
    </style>
    <script type="text/javascript">
    $(function(){
        $("Title").mouseover(function(){
            $("contect").removeClass("contect");
        }).mouseout(function(){
            $("contect").addClass("contect");
        });
    });
    </script>
</head>
<body>
    <div id="Title">
        什么是JQuery？
    </div>
    <div class="contect" id="contect">
        jQuery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库（或JavaScript框架）。jQuery设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。
    </div>
</body>
</html>